<template>
  <view class="container">
    <view class="header">
      <view class="user">
        <image
          :src="
            userInfo.avatarUrl
              ? userInfo.avatarUrl
              : 'https://s3.bmp.ovh/imgs/2021/09/5ac949d83c066048.png'
          "
          class="img"
          lazy-load
          mode="widthFix"
        ></image>
        <view class="user_center">
          <view class="user_name u-line-1">{{
            userInfo.nickName || '游客模式'
          }}</view>
          <view class="user_place u-line-1">{{
            (userInfo.province || '') + ' ' + (userInfo.city || '')
          }}</view>
        </view>
      </view>
      <view class="btn">
        <u-button
          :custom-style="customStyle"
          @click="close"
          v-show="userInfo.nickName"
          >退出登录</u-button
        >
        <u-button
          :custom-style="customStyle"
          @click="wxlogin"
          v-show="!userInfo.nickName"
          >登录</u-button
        >
      </view>
    </view>
    <u-modal
      v-model="isRegist"
      :content="content"
      mask-close-able
      title="用户提示"
      @confirm="wxregist"
      @cancel="hideModal"
    ></u-modal>
  </view>
</template>

<script>
const app = getApp()
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      isRegist: false, // 判断账户是否注册
      content: '请先在本小程序注册，点击确定即可注册成功',
      customStyle: {
        fontSize: '28rpx',
        color: '#fa7498',
        fontWeight: 'bold',
      },
    }
  },
  mounted() {
    this.userInfo = uni.getStorageSync('userInfo')
  },
  methods: {
    wxlogin() {
      uni.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        lang: 'zh_CN',
        success: (res) => {
          this.userInfo = res.userInfo
          app.globalData.userInfo = res.userInfo
          uni.setStorageSync('userInfo', res.userInfo)
          uni.login({
            success: (res) => {
              uni.request({
                url:
                  `https://glowworm.club:8001/wx/user/wx3483fb8b66bdd68a/login?code=` +
                  res.code,
                success: (res) => {
                  uni.showToast({
                    title: '登录成功',
                    icon: 'none',
                  })
                  console.log(res.data);
                  app.globalData.toekn = res.data.data
                  uni.setStorageSync('token', res.data.data)
                  uni.$emit('successLogin',true)
                },
                fail: (err) => {
                  this.isRegist = true
                },
              })
            },
          })
        },
        fail: (res) => {
          console.log('获取用户信息失败')
        },
      })
    },
    close() {
      uni.showModal({
        content: '是否要退出？',
        confirmText: '退出',
        confirmColor: '#0099ff',
        cancelColor: '#0099ff',
        success: (res) => {
          if (res.confirm) {
            try {
              uni.clearStorageSync()
              app.globalData.toekn = ''
              uni.$emit('successLogin',false)
            } catch (e) {}
            this.userInfo = {}
          }
        },
      })
    },
    wxregist() {
      uni.login({
        success: (res) => {
          uni.request({
            url:
              `https://glowworm.club:8001/wx/user/wx3483fb8b66bdd68a/register?code=` +
              res.code,
            success: (res) => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: '注册成功',
                  icon: 'none',
                })
              } else if (res.data.code == 500) {
                uni.showToast({
                  title: '账户已注册',
                  icon: 'none',
                })
              }
            },
            fail: (err) => {
            },
          })
        },
      })
    },
    hideModal() {
      this.isRegist = false
    },
  },
}
</script>

<style lang="scss">
.container {
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #fe7499;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    font-size: 38rpx;
    height: 200rpx;
    .user {
      .uimg {
        padding-right: 10rpx;
      }
      .img {
        width: 120rpx;
        border-radius: 50%;
        border: solid 2px #fff;
      }
      display: flex;
      align-items: center;
      flex: 1;
      text {
        font-size: 24rpx;
      }
    }
    .btn {
      button {
        border-radius: 10rpx;
      }
    }

    .user_center {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      margin-left: 20rpx;
      width: 140rpx;
      height: 80rpx;
      .user_name {
        width: 170rpx;
        color: #fff;
        font-size: 28rpx;
        text-align: left;
      }
      .user_place {
        color: #fff;
        width: 170rpx;
        text-align: left;
        font-size: 28rpx;
      }
    }
  }
}
</style>